<template>
  <div class="page">
    <m-header :title="type=='zt'?'我的直推':'我的間推'" :canback="Boolean(1)"></m-header>
    <section class="body">
      <div style="text-align:right;">
        <span>总人数：</span>
        <span v-show="type=='zt'">{{list&&list.count*1}}</span>
        <span v-show="type=='jt'">{{list&&list.two*1+list.three*1}}</span>
      </div>
      <ul class="list bg" v-if="list&&type=='zt'">
        <li class="item" v-for="(item,index) in list[type]" :key="index">
          <p class="info">
            <span>{{item.username}}</span>
            <span>{{item.mobile}}</span>
          </p>
          <p class="info">
            <span>等级：{{item.levelname}}</span>
            <span>人数：{{item.tjnum}}</span>
          </p>
        </li>
      </ul>
      <div v-else class="bg">
        <ul class="list">
          <!-- <li class="item">
                    <p>
                        <span>一代会员</span>
                        <span>{{list&&list.one}}</span>
                    </p>
          </li>-->
          <li class="item" @click="switchPage(2)">
            <p>
              <span>二代会员</span>
              <span>{{list&&list.two}}</span>
            </p>
          </li>
          <li class="item" @click="switchPage(3)" >
            <p>
              <span>三代会员</span>
              <span>{{list&&list.three}}</span>
            </p>
          </li>
        </ul>
      </div>
      <!-- <next v-show="type&&list&&(type=='zt'&& list[type].length==0)||(type=='jt'&& list[type].length==0)" ref="next" :nomore="true"></next> -->
      <next v-show="type&&list&&(type=='zt'&& list[type].length==0)" ref="next" :nomore="true"></next>
    </section>
  </div>
</template>
<script>
import { Owner } from '@/server/server.js';
import { mapGetters } from 'vuex';
import { Load, Secret } from '@/assets/commonjs/utils.js';
export default {
  name: "PayInfo",
  data() {
    return {
      type: null,
      list: null,
    }
  },
  mounted() {
    this.initData();
    this.getTeam(this.uid);
  },
  computed: {
    ...mapGetters(['uid'])
  },
  methods: {
    initData() {
      this.type = this.$route.query.type;
      setTimeout(() => {
        Load.loadNext(this);
      }, 0);
    },
    /**
     * 团队信息
     */
    getTeam(uid) {
      Owner.getTeam({ uid }).then(res => {
        if (res.code == 1) {
          this.list = JSON.parse(Secret.decrypt(res.data));
        } else {
          mui.toast(res.msg);
          return;
        }
      })
    },
    switchPage(type){
      this.$router.push({ name: 'TeamSecond', query: { type } })
    }
  }
}
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  // background-color: @bg-color;
  color: white;
  padding: @padding-primary;
  .bg {
    padding: 30px;
    border-radius: 30px;
    box-sizing: border-box;
    background-color: @bg-card-color;
  }
  .list {
    .item {
      .display-flex();
      flex-direction: column;
      padding: @padding-primary 20px;
      border-bottom: 1px solid #ddd;
      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      > p {
        &:first-child {
          .display-flex();
          justify-content: space-between;
        }
        &:last-child {
          text-align: right;
          margin-top: 12px;
        }
      }
    }
  }
}
</style>
